<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

		<title>吉乐铺</title>

		<!-- Google font -->
		<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700" rel="stylesheet">

		<!-- Bootstrap -->
		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/bootstrap.min.css"/>

		<!-- Slick -->
		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/slick.css"/>
		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/slick-theme.css"/>

		<!-- nouislider -->
		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/nouislider.min.css"/>

		<!-- Font Awesome Icon -->
		<link rel="stylesheet" href="${path}/static/front/home/css/font-awesome.min.css">

		<!-- Custom stlylesheet -->
		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/style.css"/>
		
		<!-- 自建Css -->
		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/my.css"/>
		

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
    </head>
	<body>
		<!-- HEADER -->
		<header>
			<!-- TOP HEADER -->
			<div id="top-header">
				<div class="container">
					<ul class="header-links pull-left">
						<li><a href="#"><i class="fa fa-phone"></i> 电话号码</a></li>
						<li><a href="#"><i class="fa fa-envelope-o"></i> 1228999026@email.com</a></li>
						<li><a href="#"><i class="fa fa-map-marker"></i> 山东省青岛市黄岛区</a></li>
					</ul>
					<ul class="header-links pull-right">
						<li class = "ExitUser"><a href="#"><i class="fa fa-dollar"></i>${user.username }</a></li>
						<li class = "in_user"><a href="#"><i class="fa fa-user-o"></i> 个人中心</a></li>
					</ul>
				</div>
			</div>
			<!-- /TOP HEADER -->

			<!-- MAIN HEADER -->
			
			
			<div id="header">
				<!-- container -->
				<div class="container">
					<!-- row -->
					<div class="row">
						<!-- LOGO -->
						<div class="col-md-3">
							<div class="header-logo">
								<a href="${path}/home/home.shtml" class="logo">
									<img src="${path}/static/front/home/img/logo.png" alt="">
								</a>
							</div>
						</div>
						<!-- /LOGO -->

						<!-- SEARCH BAR -->
						<div class="col-md-6">
							<div class="header-search">
								<form action="${path}/selectStore/getSelectStorePage.shtml" method="get">
									<select class="input-select">
										<option value="0">商品名</option>
									</select>
									<input class="input" name = "name" placeholder="根据商品名搜索" >
									<button class="search-btn" id="selectStore">搜索商品</button>
								</form>
							</div>
						</div>
						<!-- /SEARCH BAR -->

						<!-- ACCOUNT -->
						<div class="col-md-3 clearfix">
							<div class="header-ctn">
								<!-- Wishlist -->
								<div class="dropdown">
									<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" id = "MySuggest">
										<i class="fa fa-heart-o"></i>
										<span>我的评论</span>
										<div class="qty"  id="replyCount"></div>
									</a>
									<div class="cart-dropdown">
										<div class="cart-list" >
											<div class="product-widget" id = "reply">
												<h5>
													<c:if test = "${user.id == null }">
														登录后可查看您的评论
													</c:if>
												</h5>
											</div>
										</div>
									</div>
								</div>
								<!-- /Wishlist -->

								<!-- Cart -->
								<div class="dropdown">
									<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" id = "dropDown">
										<i class="fa fa-shopping-cart"></i>
										<span>购物车</span>
										<div class="qty" id="cartCount"></div>
									</a>
									<div class="cart-dropdown">
										<div class="cart-list" >
											<div class="product-widget" id = "productWidget">
												<div>登录后可查看您的购物车概览</div>
											</div>
										</div>
										<div class="cart-btns">
											<a class = "login_cart" href="#">登录</a>
											<a class = "in_cart" href="#" >我的购物车 <i class="fa fa-arrow-circle-right"></i></a>
										</div>
									</div>
								</div>
								<!-- /Cart -->

								
							</div>
						</div>
						<!-- /ACCOUNT -->
					</div>
					<!-- row -->
				</div>
				<!-- container -->
			</div>
			<!-- /MAIN HEADER -->
		</header>
		<!-- /HEADER -->

		<!-- NAVIGATION -->
		<nav id="navigation" >
			<!-- container -->
			<div class="container" style = "margin:0 auto;">
				<!-- responsive-nav -->
				<div id="responsive-nav" >
					<!-- NAV -->
					<ul class="main-nav nav navbar-nav Category1" >
						<c:forEach items="${topCategoryList}" var="topCategory"> 
							<li style = "padding = 5px">
								<a id = "Category1A" >${topCategory.name}</a>
								<c:forEach items="${secondCategoryList}" var="secondCategory"> 
								<c:if test="${secondCategory.parentId==topCategory.id}">
									<ul class ="Category2">
										<li id = "Category2Li">
											<a id="Category2A" href="${path}/store/getStorePage.shtml?categoryId=${secondCategory.id}" >${secondCategory.name}</a>
										</li>
									</ul>
								</c:if>
							</c:forEach>
							</li>
						</c:forEach>
					</ul>
					<!-- /NAV -->
				</div>
				<!-- /responsive-nav -->
			</div>
			<!-- /container -->
		</nav>
		<!-- /NAVIGATION -->

		<!-- SECTION -->
		<div class="section">
			<!-- container -->
			<div class="container">
				<!-- row -->
				<div class="row">
					<!-- shop -->
					<div class="col-md-4 col-xs-6">
						<div class="shop">
							<div class="shop-img">
								<img src="${path}/static/front/home/img/shop01.png" alt="">
							</div>
							<div class="shop-body">
								<h3>联想笔记本<br>新春特惠季</h3>
								<a href="#" class="cta-btn">Shop now <i class="fa fa-arrow-circle-right"></i></a>
							</div>
						</div>
					</div>
					<!-- /shop -->

					<!-- shop -->
					<div class="col-md-4 col-xs-6">
						<div class="shop">
							<div class="shop-img">
								<img src="${path}/static/front/home/img/shop03.png" alt="">
							</div>
							<div class="shop-body">
								<h3>阿思翠耳机<br>女毒动听</h3>
								<a href="#" class="cta-btn">Shop now <i class="fa fa-arrow-circle-right"></i></a>
							</div>
						</div>
					</div>
					<!-- /shop -->

					<!-- shop -->
					<div class="col-md-4 col-xs-6">
						<div class="shop">
							<div class="shop-img">
								<img src="${path}/static/front/home/img/shop02.png" alt="">
							</div>
							<div class="shop-body">
								<h3>佳能<br>感动常在</h3>
								<a href="#" class="cta-btn">Shop now <i class="fa fa-arrow-circle-right"></i></a>
							</div>
						</div>
					</div>
					<!-- /shop -->
				</div>
				<!-- /row -->
			</div>
			<!-- /container -->
		</div>
		<!-- /SECTION -->
		
		<!-- SECTION -->
		<div class="section">
			<!-- container -->
			<div class="container">
				<!-- row -->
				<div class="row">

					<!-- section title -->
					<div class="col-md-12">
						<div class="section-title">
							<h3 class="title">新 品 上 市</h3>
							<div class="section-nav">
								<ul class="section-tab-nav tab-nav">
									<li class="active"><a data-toggle="tab" href="#tab1">按上架时间排序</a></li>
									
								</ul>
							</div>
						</div>
					</div>
					<!-- /section title -->
					
					
					<!-- Products tab & slick -->
					<div class="col-md-12">
						<div class="row">
							<div class="products-tabs">
								<!-- tab -->
								<div id="tab1" class="tab-pane active">
									<div class="products-slick" data-nav="#slick-nav-1">
										<!-- product -->
										<c:forEach items="${listNew}" var="product" begin="0" end="4">
										<div class="product">
											<div class="product-img">
												<img src="${product.mainImageFullUrl}" 
												width=400px height=300px
												alt="">
												<div class="product-label">
													<span class="sale">新</span>
													<span class="new">NEW</span>
												</div>
											</div>
											<div class="product-body">
												<p class="product-category">${product.categoryName }</p>
												<h3 class="product-name"><a href="${path}/product/product.shtml?id=${product.id}&categoryId=${product.categoryId}">${product.name }</a></h3>
												<h4 class="product-price">$${product.price } <del class="product-old-price">$990.00</del></h4>
												<div class="product-rating">
													<i class="fa fa-star"></i>
													<i class="fa fa-star"></i>
													<i class="fa fa-star"></i>
													<i class="fa fa-star"></i>
													<i class="fa fa-star"></i>
												</div>
												<div class="product-btns">
													<button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span class="tooltipp">add to wishlist</span></button>
													<button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button>
													<button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick view</span></button>
												</div>
											</div>
											<div class="add-to-cart">
												<button class="add-to-cart-btn insert_cart" id= ${product.id }>
													<i class="fa fa-shopping-cart"></i>加入购物车
												</button>
											</div>
										</div>
										<!-- /product -->
									</c:forEach>
									</div>
									<div id="slick-nav-1" class="products-slick-nav"></div>
								</div>
								<!-- /tab -->
							</div>
						</div>
					</div>
					<!-- Products tab & slick -->
				</div>
				<!-- /row -->
			</div>
			<!-- /container -->
		</div>
		<!-- /SECTION -->

		<!-- HOT DEAL SECTION -->
		<div id="hot-deal" class="section">
			<!-- container -->
			<div class="container">
				<!-- row -->
				<div class="row">
					<div class="col-md-12">
						<div class="hot-deal">
							<ul class="hot-deal-countdown">
								<li>
									<div>
										<h3>02</h3>
										<span>Days</span>
									</div>
								</li>
								<li>
									<div>
										<h3>10</h3>
										<span>Hours</span>
									</div>
								</li>
								<li>
									<div>
										<h3>34</h3>
										<span>Mins</span>
									</div>
								</li>
								<li>
									<div>
										<h3>60</h3>
										<span>Secs</span>
									</div>
								</li>
							</ul>
							<h2 class="text-uppercase">本周热点</h2>
							<p>大牌手机 低价促销</p>
							<a class="primary-btn cta-btn" href="${path}/store/getStorePage.shtml?categoryId=100012">点我看看</a>
						</div>
					</div>
				</div>
				<!-- /row -->
			</div>
			<!-- /container -->
		</div>
		<!-- /HOT DEAL SECTION -->

		<!-- SECTION -->
		<div class="section">
			<!-- container -->
			<div class="container">
				<!-- row -->
				<div class="row">

					<!-- section title -->
					<div class="col-md-12">
						<div class="section-title">
							<h3 class="title">低价精品</h3>
							<div class="section-nav">
								<ul class="section-tab-nav tab-nav">
									<li class="active"><a data-toggle="tab" href="#tab2">按商品价格排序</a></li>
									
								</ul>
							</div>
						</div>
					</div>
					<!-- /section title -->

					<!-- Products tab & slick -->
					<div class="col-md-12">
						<div class="row">
							<div class="products-tabs">
								<!-- tab -->
								<div id="tab2" class="tab-pane fade in active">
									<div class="products-slick" data-nav="#slick-nav-2">
										<!-- product -->
										<c:forEach items="${listCheap}" var="product" begin="0" end="4">
										<div class="product">
											<div class="product-img">
												<img src="${product.mainImageFullUrl}" 
												width=400px height=300px
												alt="">
												<div class="product-label">
													<span class="sale">新</span>
													<span class="new">NEW</span>
												</div>
											</div>
											<div class="product-body">
												<p class="product-category">${product.categoryName }</p>
												<h3 class="product-name"><a href="${path}/product/product.shtml?id=${product.id}&categoryId=${product.categoryId}">${product.name }</a></h3>
												<h4 class="product-price">$${product.price } <del class="product-old-price">$990.00</del></h4>
												<div class="product-rating">
													<i class="fa fa-star"></i>
													<i class="fa fa-star"></i>
													<i class="fa fa-star"></i>
													<i class="fa fa-star"></i>
													<i class="fa fa-star"></i>
												</div>
												<div class="product-btns">
													<button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span class="tooltipp">add to wishlist</span></button>
													<button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button>
													<button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick view</span></button>
												</div>
											</div>
											<div class="add-to-cart">
												<button class="add-to-cart-btn insert_cart" id = ${product.id }>
													<i class="fa fa-shopping-cart"></i>加入购物车</button>
											</div>
										</div>
										</c:forEach>
										<!-- /product -->
									</div>
									<div id="slick-nav-2" class="products-slick-nav"></div>
								</div>
								<!-- /tab -->
							</div>
						</div>
					</div>
					<!-- /Products tab & slick -->
				</div>
				<!-- /row -->
			</div>
			<!-- /container -->
		</div>
		<!-- /SECTION -->

		<!-- SECTION -->
		<div class="section">
			<!-- container -->
			<div class="container">
				<!-- row -->
				<div class="row">
					<div class="col-md-4 col-xs-6">
						<div class="section-title">
							<h4 class="title">手机排行榜</h4>
							<div class="section-nav">
								<div id="slick-nav-3" class="products-slick-nav"></div>
							</div>
						</div>

						<div class="products-widget-slick" data-nav="#slick-nav-3">
							<div>
								<c:forEach items="${listPhone}" var="product" begin="0" end="2">
								<!-- product widget -->
								<div class="product-widget">
									<div class="product-img">
										<img src="${product.mainImageFullUrl}" alt="">
									</div>
									<div class="product-body">
										<p class="product-category">${product.categoryName }</p>
										<h3 class="product-name"><a href="${path}/product/product.shtml?id=${product.id}&categoryId=${product.categoryId}">${product.name }</a></h3>
										<h4 class="product-price">$${product.price }<del class="product-old-price">$990.00</del></h4>
									</div>
								</div>
								<!-- /product widget -->
								</c:forEach>
							</div>
							<div>
								<c:forEach items="${listPhone}" var="product" begin="3" end="5">
								<!-- product widget -->
								<div class="product-widget">
									<div class="product-img">
										<img src="${product.mainImageFullUrl}" alt="">
									</div>
									<div class="product-body">
										<p class="product-category">${product.categoryName }</p>
										<h3 class="product-name"><a href="${path}/product/product.shtml?id=${product.id}&categoryId=${product.categoryId}">${product.name }</a></h3>
										<h4 class="product-price">$${product.price }<del class="product-old-price">$990.00</del></h4>
									</div>
								</div>
								<!-- /product widget -->
								</c:forEach>
							</div>
						</div>
					</div>

					<div class="col-md-4 col-xs-6">
						<div class="section-title">
							<h4 class="title">皮肤排行榜</h4>
							<div class="section-nav">
								<div id="slick-nav-4" class="products-slick-nav"></div>
							</div>
						</div>

						<div class="products-widget-slick" data-nav="#slick-nav-4">
							<div>
								<c:forEach items="${listSkin}" var="product" begin="0" end="2">
								<!-- product widget -->
								<div class="product-widget">
									<div class="product-img">
										<img src="${product.mainImageFullUrl}" alt="">
									</div>
									<div class="product-body">
										<p class="product-category">${product.categoryName }</p>
										<h3 class="product-name"><a href="${path}/product/product.shtml?id=${product.id}&categoryId=${product.categoryId}">${product.name }</a></h3>
										<h4 class="product-price">$${product.price }<del class="product-old-price">$990.00</del></h4>
									</div>
								</div>
								<!-- /product widget -->
								</c:forEach>
							</div>
							<div>
								<c:forEach items="${listSkin}" var="product" begin="3" end="5">
								<!-- product widget -->
								<div class="product-widget">
									<div class="product-img">
										<img src="${product.mainImageFullUrl}" alt="">
									</div>
									<div class="product-body">
										<p class="product-category">${product.categoryName }</p>
										<h3 class="product-name"><a href="${path}/product/product.shtml?id=${product.id}&categoryId=${product.categoryId}">${product.name }</a></h3>
										<h4 class="product-price">$${product.price }<del class="product-old-price">$990.00</del></h4>
									</div>
								</div>
								<!-- /product widget -->
								</c:forEach>
							</div>
						</div>
					</div>

					<div class="clearfix visible-sm visible-xs"></div>

					<div class="col-md-4 col-xs-6">
						<div class="section-title">
							<h4 class="title">耳机排行榜</h4>
							<div class="section-nav">
								<div id="slick-nav-5" class="products-slick-nav"></div>
							</div>
						</div>

						<div class="products-widget-slick" data-nav="#slick-nav-5">
							<div>
								<c:forEach items="${listHearphone}" var="product" begin="0" end="2">
								<!-- product widget -->
								<div class="product-widget">
									<div class="product-img">
										<img src="${product.mainImageFullUrl}" alt="">
									</div>
									<div class="product-body">
										<p class="product-category">${product.categoryName }</p>
										<h3 class="product-name"><a href="${path}/product/product.shtml?id=${product.id}&categoryId=${product.categoryId}">${product.name }</a></h3>
										<h4 class="product-price">$${product.price }<del class="product-old-price">$990.00</del></h4>
									</div>
								</div>
								<!-- /product widget -->
								</c:forEach>
							</div>
							<div>
								<c:forEach items="${listHearphone}" var="product" begin="3" end="5">
								<!-- product widget -->
								<div class="product-widget">
									<div class="product-img">
										<img src="${product.mainImageFullUrl}" alt="">
									</div>
									<div class="product-body">
										<p class="product-category">${product.categoryName }</p>
										<h3 class="product-name"><a href="${path}/product/product.shtml?id=${product.id}&categoryId=${product.categoryId}">${product.name }</a></h3>
										<h4 class="product-price">$${product.price }<del class="product-old-price">$990.00</del></h4>
									</div>
								</div>
								<!-- /product widget -->
								</c:forEach>
							</div>
						</div>
					</div>

				</div>
				<!-- /row -->
			</div>
			<!-- /container -->
		</div>
		<!-- /SECTION -->

		<!-- NEWSLETTER -->
		<div id="newsletter" class="section">
			<!-- container -->
			<div class="container">
				<!-- row -->
				<div class="row">
					<div class="col-md-12">
						<div class="newsletter">
							<p>	请留下你的 <strong>评论and建议</strong></p>
							<form id="suggest">
								<input class="input" name = "suggest" type="text" placeholder="写下你想说的话">
								<button class="newsletter-btn " onClick="suggestBtn();return false;"><i class="fa fa-envelope"></i> 反馈给我们</button>
							</form>
							<ul class="newsletter-follow">
								<li>
									<a href="#"><i class="fa fa-facebook"></i></a>
								</li>
								<li>
									<a href="#"><i class="fa fa-twitter"></i></a>
								</li>
								<li>
									<a href="#"><i class="fa fa-instagram"></i></a>
								</li>
								<li>
									<a href="#"><i class="fa fa-pinterest"></i></a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- /row -->
			</div>
			<!-- /container -->
		</div>
		<!-- /NEWSLETTER -->

		<!-- FOOTER -->
		<footer id="footer">
			<!-- top footer -->
			<div class="section">
				<!-- container -->
				<div class="container">
					<!-- row -->
					<div class="row">
						<div class="col-md-3 col-xs-6">
							<div class="footer">
								<h3 class="footer-title">进入后台管理</h3>
								<a href="${path}/user/getLoginListPage.action""><i class="fa fa-envelope-o"></i>需要相应权限才可进入</a>
							</div>
						</div>

					</div>
					<!-- /row -->
				</div>
				<!-- /container -->
			</div>
			<!-- /top footer -->
		</footer>
		<!-- /FOOTER -->

		<!-- jQuery Plugins -->
		<script src="${path}/static/front/home/js/jquery.min.js"></script>
		<script src="${path}/static/front/home/js/bootstrap.min.js"></script>
		<script src="${path}/static/front/home/js/slick.min.js"></script>
		<script src="${path}/static/front/home/js/nouislider.min.js"></script>
		<script src="${path}/static/front/home/js/jquery.zoom.min.js"></script>
		<script src="${path}/static/front/home/js/main.js"></script>
		<script src="${path}/static/common/layer/layer.js"></script>
		<script src="${path}/static/common/mylayer.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css"	href="${path}/static/front/css/main.css">
		<link rel="stylesheet" type="text/css"	href="${path}/static/front/css/reset.css">
	
		
		<!-- 分类下拉  -->
		<script >
			$(function(){
				//监听一级菜单移入
				$(".Category1>li").mouseenter(function(){
					var $Category2 = $(this).children(".Category2");
					$Category2.stop();
					$Category2.slideDown(300);
				});
				
				$(".Category1>li").mouseleave(function(){
					var $Category2 = $(this).children(".Category2");
					$Category2.stop();
					$Category2.slideUp(300);
				});
				
			});
		</script>
		
		<!-- 登录框 -->
	<div id="loginFrom" class="login_form fr" style="display: none">
		<div class="login_title clearfix">
			<h1>用户登录</h1>
			<a id = "register">立即注册</a>
		</div>
		<div class="form_input">
			<form id="form">
				<input type="text" name="username" class="name_input"
					placeholder="请输入用户名">
				<div class="user_error">输入错误</div>
				<input type="password" name="password" class="pass_input"
					placeholder="请输入密码">
				<div class="pwd_error">输入错误</div>
				<div class="more_input clearfix">
					<input type="checkbox" name=""> <label>记住用户名</label> <a
						href="#">忘记密码</a>
				</div>
			</form>
			<input type="button" name="" value="登录" class="input_submit"
				onclick="submitForm()">
		</div>
	</div>
	
	<script type="text/javascript">
	$("#MySuggest").on(
			"click",
			function(){
				var user = "${user}";
				var name = "${user.username}";
				if (user == "") {// 这个用户没有登录,弹出登录框
					mylayer.errorMsg("您尚未登录");
				} else {
					$.post(
							"${path}/suggest/selectSuggestByUserId.action",
							 {
								"userId" : "${user.id}"
							  }, 
							  function(listSC) {
									console.log(listSC);
									var html = "<div class='product-widget' ><div class='product-body'><h3 class='product-name'>我的评论："+listSC[0].suggest+"</h3></br><h4 class='product-price'>"+listSC[0].reply+"</h4></div></div>"
									for(var i = 1; i < listSC.length; i++) {
										html += "<div class='product-widget' ><div class='product-body'><h3 class='product-name'>我的评论："+listSC[i].suggest+"</h3></br><h4 class='product-price'>"+listSC[i].reply+"</h4></div></div>"
									}
									$("#reply").html(html); // innerHtml
									console.log("i = " + i);
									$("#replyCount").html(i);
							  	},
							"json"
						);
				}
			}
		);
	
	$("#dropDown").on(
			"click",
			function(){
				var user = "${user}";
				var name = "${user.username}";
				if (user == "") {// 这个用户没有登录,弹出登录框
					mylayer.errorMsg("您尚未登录");
				} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
					$.post(
							"${path}/store/selectUserCart.shtml",
							 {
								"userId" : "${user.id}"
							  }, 
							  function(listUC) {
									console.log(listUC);
									var html = "<div class='product-widget' ><div class='product-img'><img src='"+listUC[0].product.mainImageFullUrl+"' alt=''></div><div class='product-body'><h3 class='product-name'><a href='${path}/product/product.shtml?id="+ listUC[0].product.id +"&categoryId="+ listUC[0].product.categoryId +"' >"+listUC[0].product.name+"</a></h3></br><h4 class='product-price'>共有："+listUC[0].quantity+" 件</h4><h4 class='product-price'>商品单价为：$"+listUC[0].product.price+ "</h4></div><button class='delete'><i class='fa fa-close'></i></button></div>"
									for(var i = 1; i < listUC.length; i++) {
										html += "<div class='product-widget' ><div class='product-img'><img src='"+listUC[i].product.mainImageFullUrl+"' alt=''></div><div class='product-body'><h3 class='product-name'><a href='${path}/product/product.shtml?id="+ listUC[i].product.id +"&categoryId="+ listUC[i].product.categoryId +"' >"+listUC[i].product.name+"</a></h3></br><h4 class='product-price'>共有："+listUC[i].quantity+" 件</h4><h4 class='product-price'>商品单价为：$"+listUC[i].product.price+ "</h4></div><button class='delete'><i class='fa fa-close'></i></button></div>"
									}
									$("#productWidget").html(html); // innerHtml
									console.log("i = " + i);
									$("#cartCount").html(i);
							  	},
							"json"
						);
				}
			}
		);
	
		$(".in_cart").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						mylayer.successUrl(
								"正在进入"+userName+"的购物车",
								"${path}/cart/getCartListPage.shtml");
							}
					});
		$(".in_user").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						mylayer.successUrl(
								"正在进入"+userName+"的个人中心",
								"${path}/userInfo/getUserInfoPage.shtml");
							}
					});
		
		$(".ExitUser").on(
				"click",
				function() {
					//退出当前用户
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						mylayer.successMsg("您尚未登录"	);
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						 layer.confirm('确定退出该用户么？', function(index){
					          	$.post(
					          		"${path}/userInfo/ExitUser.shtml",
					          		function(result) {
					          			if(result.success) {
					          				mylayer.successMsg(result.msg);
					          				 location.reload();  
					          			} else {
					          				mylayer.errorMsg(result.msg);
					          			}
					          		},
					          		"json"
					          	);
					          });
					}
				});
		
		$(".login_cart").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						mylayer.successMsg("用户"+userName+"您已登录了");
					}
					});

		$(".insert_cart").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
				
					var productId = $(this).attr("id");
					console.log("productId = " + productId);
					
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						$.post(
								"${path}/cart/insert.shtml",
								{
								 "productId":productId, 
								},
								function(result) {
									if(result.success) {
										// 如果插入成功，跳转到购物车列表界面
										mylayer.successUrl(result.msg, "${path}/cart/getCartListPage.shtml");
									} else {
										mylayer.errorMsg(result.msg);
									}
								},
								"json"
							);
							
						}
					});
		
		function suggestBtn(){
			// 加入购物车之前首先要判断有没有登录
			// 1、如果没有登录那首先要登录
			// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
			// User user = (User)sesstion.getAttribute("user");
			var user = "${user}";
			var suggestText = $("input:text[name='suggest']").val();
			
			if (user == "") {// 这个用户没有登录,弹出登录框
				layer.open({
					type : 1,
					title : "登录",
					offset : "50px",
					area : [ "370px", "420px" ],
					content : $("#loginFrom")
				});
			} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
				$.post(
						"${path}/home/suggest.shtml",
						{
						 "suggestText":suggestText, 
						},
						function(result) {
							if(result.success) {
								// 如果插入成功，跳转到购物车列表界面
								mylayer.successMsg(result.msg);
							} else {
								mylayer.errorMsg(result.msg);
							}
						},
						"json"
					);
					
				}
		}
		
		
		$("#register").on(
			"click",
			function() {
				layer.open({
					type : 2,
					title : "注册",
					offset : "50px",
					area : [ "370px", "560px" ],
					content : "${path}/userInfo/getRegister.shtml"
				});
		});
		
		
		
		function submitForm() {
			$.post(
				"${path}/user/login.action",
				$("#form").serialize(),
				function(result) {
					console.log(result);
					if(result.success) {
						mylayer.successMsg(result.msg);
						//当你在iframe页面关闭自身时获得当前弹出框的index索引
						var index = parent.layer.getFrameIndex(window.name);
						// js一个方法，定时器，1000毫秒之后自动执行function里面的代码
						setTimeout(function() {
							 // 关闭弹出层
							 parent.layer.close(index); 
							 // 刷新父页面
							 window.parent.location.reload();
						}, 1000);
					} else {
						mylayer.errorMsg(result.msg);
					}
				},
				"json"
			);
		}
	</script>
	</body>
</html>
